<template>
<div id="life">
    <div class="section category-section">
        <div>
            <div class="tab-bar-box">
                <div class="tab-bar">
                    <ul class="tab-bar-ul">
                        <li class="tab-bar-li" @click="follow()">关注</li>
                        <li class="tab-bar-li" @click="foolist()">食谱</li>
                        <li class="tab-bar-li" @click="recommend()">推荐</li>
                        <li class="tab-bar-li" @click="makeup()">时尚美妆</li>
                        <li class="tab-bar-li on">生活</li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
              <div class="content-item">
                <div>
                  <div class="scroll-box scrollLoad-box">
                    <div>
                      <ul class="item-list">
                        <li class="item-list-pic-bottom">
                          <div class="item-list-cont">
                            <p class="item-list-cont-title-bottom">阳台可以种哪些可以吃的植物？</p>
                            <p class="item-list-cont-desc-clamp2">小时候住大院，楼下有一块非常大的空地，各家妈妈们非常和谐地“瓜分”个干净。</p>
                          </div>
                          <div class="pic">
                            <img :src="assets.green" alt="" class="item-list-back-img" style="height: calc((100vw - 20px) * 0.447761);width:335px">
                          </div>
                          <div class="item-list-cont-bottom">
                            <div class="userInfo">
                              <img :src="assets.yiwu" alt="" class="photo">
                              <span style="font-size: 12px;font-weight: 300;color: #666;">鹦鹉厨房</span>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-bottom">
                          <div class="item-list-cont">
                            <p class="item-list-cont-title-bottom">家里有个“破坏王”？是因为玩具没选对！</p>
                            <p class="item-list-cont-desc-clamp2">推荐你这些玩具，保证孩子的安全，又能玩的开心~</p>
                          </div>
                          <div class="pic">
                            <img :src="assets.child" alt="" class="item-list-back-img" style="height: calc((100vw - 20px) * 0.447761);width:335px">
                          </div>
                          <div class="item-list-cont-bottom">
                            <div class="userInfo">
                              <img :src="assets.guantou" alt="" class="photo">
                              <span style="font-size: 12px;font-weight: 300;color: #666;">爱力象星球</span>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.tea" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">几乎零热量的抹茶居然如此健康，清爽味道扑灭夏日的烦躁！</p>
                            <p class="item-list-cont-desc">一到夏天，各式冰淇淋、冷饮就开始陆续亮相街头。各种新鲜的口味层出不穷，但唯独有一种口味经久不衰，那就是墨绿色的抹茶~</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头视频</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.yangmei" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">制酱、泡酒、做果干，这样吃才不枉杨梅季！</p>
                            <p class="item-list-cont-desc">一到夏季，各种水果就都开始出现在大众的餐桌上，6月，正是吃杨梅的最佳季节。今天小厨给大家整理了几道杨梅料理，制酱、泡酒、做果干，也许比现摘的更美味哦~</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头视频</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.yezioil" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">减脂的你，最适合哪个烹饪油</p>
                            <p class="item-list-cont-desc">最近椰子油被批评的挺惨的....但我自己非常喜欢用椰子油，尤其是做一些健康烘焙之类的，也不觉得椰子油完全是炒作的产物。不过关于烹饪油大家似乎确实有很多疑惑，所以今天的文章就想来跟大家聊聊如何选</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.jiansheng" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">咕噜健身厨房</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.zhou" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">关于节食&代谢，详解最常见6大迷思</p>
                            <p class="item-list-cont-desc">今天主要就想跟大家聊聊关于节食这个话题，因为每天私信里都会有女生问我相关的话题，还有一些女孩子发给我她们的减肥三餐，绝大部分的热量都非常非常低。比如三餐只喝酸奶吃红薯，或者干脆晚餐只吃水果不吃饭等等。</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.jiansheng" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">咕噜健身厨房</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-bottom">
                          <div class="item-list-cont">
                            <p class="item-list-cont-title-bottom">冷饮真的伤胃吗？</p>
                            <p class="item-list-cont-desc-clamp2">冰激凌、沙冰、冰镇饮料、冰镇西瓜……这些食品在夏天有着巨大的吸引力，但是“冰冷”堪称是中国传统养生最重要的禁忌</p>
                          </div>
                          <div class="pic">
                            <img :src="assets.drink" alt="" class="item-list-back-img" style="height: calc((100vw - 20px) * 0.447761);width:335px">
                          </div>
                          <div class="item-list-cont-bottom">
                            <div class="userInfo">
                              <img :src="assets.ssy" alt="" class="photo">
                              <span style="font-size: 12px;font-weight: 300;color: #666;">詹姆士的厨房</span>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-bottom">
                          <div class="item-list-cont">
                            <p class="item-list-cont-title-bottom">早上到底要不要空腹喝水？很多人都没做对，一定有你！</p>
                            <p class="item-list-cont-desc-clamp2">很多人都说要多喝水，其实喝水也是个技术活哦~只要你喝对了，才会起到应有的保健功效，一起来看吧~</p>
                          </div>
                          <div class="pic">
                            <img :src="assets.water" alt="" class="item-list-back-img" style="height: calc((100vw - 20px) * 0.447761);width:335px">
                          </div>
                          <div class="item-list-cont-bottom">
                            <div class="userInfo">
                              <img :src="assets.ssy" alt="" class="photo">
                              <span style="font-size: 12px;font-weight: 300;color: #666;">朱莉生活日记</span>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.yumi" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">【食物百科】煮玉米水的 6 大妙用，你知道吗？</p>
                            <p class="item-list-cont-desc">功效一：降血压、降血糖 </p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">朱莉生活日记</span>
                              </div>
                            </div>
                          </div>
                        </li>
                       <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.yangmei" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">制酱、泡酒、做果干，这样吃才不枉杨梅季！</p>
                            <p class="item-list-cont-desc">一到夏季，各种水果就都开始出现在大众的餐桌上，6月，正是吃杨梅的最佳季节。今天小厨给大家整理了几道杨梅料理，制酱、泡酒、做果干，也许比现摘的更美味哦~</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头视频</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.yezioil" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">减脂的你，最适合哪个烹饪油</p>
                            <p class="item-list-cont-desc">最近椰子油被批评的挺惨的....但我自己非常喜欢用椰子油，尤其是做一些健康烘焙之类的，也不觉得椰子油完全是炒作的产物。不过关于烹饪油大家似乎确实有很多疑惑，所以今天的文章就想来跟大家聊聊如何选</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.jiansheng" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">咕噜健身厨房</span>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-left">
                          <div class="pic">
                            <img :src="assets.girl" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">【图解】口红会涂比会买更重要！</p>
                            <p class="item-list-cont-desc">少女们~你们一定有过这种经历：无论是海报上还是美妆博主PO文上的口红试色都感觉贼拉好看！</p>
                            <div class="item-list-cont-bottom">
                              <div class="userInfo">
                                <img :src="assets.guantou" alt="" class="photo">
                                <span style="font-size: 12px;font-weight: 300;color: #666;">罐头时尚ISEE</span>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="more-text">数据加载中请稍后</div>
                  </div>
                </div>
              </div>
            </div>




            <div class="navigation footer-nav ipx-pad">
                <span class="navigation-item" @click="index()">
                <i class="iconfont1 icon-home"></i>
                <span class="navigation-item-label">首页</span>
                </span>
                <span class="navigation-item">
                 <i class="iconfont2 icon-home"></i>
                <span class="navigation-item-label nav-item-label1">发现</span>
                </span>
                <span class="navigation-item" @click="buy()">
                 <i class="iconfont3 icon-home"></i>
                <span class="navigation-item-label">购物车</span>
                </span>
                <span class="navigation-item" @click="list()">
                 <i class="iconfont4 icon-home"></i>
                <span class="navigation-item-label">订单</span>
                </span>
                <span class="navigation-item" @click="mine()">
                 <i class="iconfont5 icon-home"></i>
                <span class="navigation-item-label">我的</span>
                </span>
            </div>
        </div>
    </div>








    
</div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: 400;
  font-style: normal;
}
#life {
  .category-section {
    padding-bottom: 51px;
    .tab-bar-box {
      height: 50px;
      overflow-y: hidden;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 501;
      .tab-bar {
        text-align: center;
        white-space: nowrap;
        width: 100%;
        height: 60px;
        line-height: 50px;
        background-color: #fff;
        overflow-x: auto;
        .tab-bar-ul {
          height: 50px;
          display: inline-block;
          text-align: center;
          .tab-bar-li {
            font-size: 16px;
            color: #333;
            padding: 15px 13px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            position: relative;
          }
          .on {
            color: #47b34f;
          }
          .on:after {
            content: "";
            height: 3px;
            width: 20px;
            background-color: #47b34f;
            position: absolute;
            border-radius: 5px;
            bottom: 7px;
            left: 50%;
            margin-left: -10px;
          }
        }
      }
    }
    .tab-content {
      padding-top: 50px;
      .content-item {
        height: 100%;
        .scrollLoad-box {
          padding-bottom: 50px;
          overflow-x: auto;
          .item-list {
            padding: 0 10px;
            list-style: none;
            .item-list-pic-bottom {
              background-color: #fff;
              border-radius: 6px;
              border: none;
              margin: 10px 0;
              padding: 10px;
              clear: both;
              font-weight: 400;
              font-style: normal;
              color: #555;
              .item-list-cont {
                padding: 5px 0 10px;
                .item-list-cont-title-bottom {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 18px;
                  font-weight: 700;
                  color: #333;
                  max-height: 44px;
                  line-height: 22px;
                }
                .item-list-cont-desc-clamp2 {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 14px;
                  line-height: 22px;
                  max-height: 44px;
                  color: #666;
                  margin-top: 10px;
                }
              }
              .pic {
                width: 100%;
                border-radius: 6px;
                padding: 0 0 10px;
                position: relative;
                .item-list-back-img {
                  border-radius: 6px;
                  background-color: #f4f4f4;
                  background-repeat: no-repeat;
                  background-position: 50%;
                  background-size: cover;
                }
              }
              .item-list-cont-bottom {
                flex: 1 1;
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;
                display: flex;
                align-items: flex-end;
                .userInfo {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  width: 200px;
                  .photo {
                    height: 20px;
                    width: 20px;
                    margin-right: 5px;
                    border: none;
                    float: left;
                  }
                }
              }
            }
            .item-list-pic-left {
              background-color: #fff;
              border-radius: 6px;
              margin: 10px 0;
              width: 100%;
              .pic {
                height: 132px;
                width: 132px;
                border-radius: 6px 0 0 6px;
                float: left;
                position: relative;
                .item-list-bigPic {
                  height: 132px;
                  width: 132px;
                  border: none;
                  float: left;
                }
              }
              .item-list-cont {
                height: 112px;
                padding: 10px;
                display: flex;
                flex-direction: column;
                .item-list-cont-title {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 16px;
                  font-weight: 700;
                  color: #333;
                  max-height: 42px;
                  line-height: 20px;
                }
                .item-list-cont-desc {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 12px;
                  line-height: 15px;
                  max-height: 15px;
                  color: #333;
                  margin-top: 5px;
                  margin-bottom: 32px;
                }
                 .item-list-cont-bottom {
                flex: 1 1;
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;
                display: flex;
                align-items: flex-end;
                .userInfo {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  width: 200px;
                  .photo {
                    height: 20px;
                    width: 20px;
                    margin-right: 5px;
                    border: none;
                    float: left;
                  }
                }
              }
              }
            }
          }
          .more-text {
            font-size: 16px;
            line-height: 15px;
            padding: 15px 0;
            color: #666;
            text-align: center;
          }
        }
      }
    }

    .footer-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 12px;
      z-index: 1001;
      align-items: center;
      display: flex;
    }
    .navigation {
      align-items: center;
      background-image: linear-gradient(
        180deg,
        #e8e8e8,
        #e8e8e8 50%,
        transparent 0
      );
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-color: #fff;
      height: 50px;
      .navigation-item {
        display: inline-block;
        width: 75px;
        position: relative;
        color: #555;
        flex: 1 1;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        text-align: center;
        // color: #39ac69;
        display: flex;
        .iconfont1 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center 0;
        }
        .iconfont2 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -651px;
        }
        .iconfont3 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -100px;
        }
        .iconfont4 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -200px;
        }
        .iconfont5 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -300px;
        }
        .navigation-item-label {
          display: block;
          height: 20px;
          line-height: 17px;
        }
        .nav-item-label1 {
          color: #39ac69;
        }
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    follow() {
        this.$router.push({
        name: "find"
      });
    },
    foolist() {
      this.$router.push({
        name: "foodlist"
      });
    },
    recommend(){
      this.$router.push({
        name: "recommend"
      });
    },
    makeup(){
       this.$router.push({
        name: "makeup"
      });
    },
    index() {
      this.$router.push({
        name: "index"
      });
    },
    buy() {
      this.$router.push({
        name: "buy"
      });
    },
    list() {
      this.$router.push({
        name: "list"
      });
    },
    mine() {
      this.$router.push({
        name: "mine"
      });
    }
  }
};
</script>





